<template>
  <div class="l-rblock l-form-viewer" style="padding:8px;">
    <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="100px">
      <div class="l-auto-window ">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane class="l-tabs-container" :label="$t('基础信息')" name="tab0" v-if="lr_hasPageAuth('tab0')">
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col :span="12" v-if="lr_formLookAuth('f_FullName')">
                  <el-form-item :label="$t('名称')" prop="f_FullName">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_FullName',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_FullName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_ShortName')">
                  <el-form-item :label="$t('简称')" prop="f_ShortName">
                    <el-input
                    :disabled="
                      !lr_formEditAuth(
                        'f_ShortName',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_ShortName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_EnCode')">
                  <el-form-item :label="$t('编码')" prop="f_EnCode">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_EnCode',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_EnCode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_Nature')">
                  <el-form-item :label="$t('性质')" prop="f_Nature">
                    <l-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_Nature',
                        false || isReadOnly
                      )
                    "
                    :options="lr_dataItemOptions(lr_dataItem['CompanyNature'])"
                      v-model="formData.f_Nature"></l-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_ParentId')">
                  <el-form-item :label="$t('公司')" prop="f_ParentId">
                    <l-tree-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_ParentId',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_ParentId" :options="companyTree" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_FoundedTime')">
                  <el-form-item :label="$t('成立')" prop="f_FoundedTime">
                    <l-date 
                    :disabled="
                      !lr_formEditAuth(
                        'f_FoundedTime',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_FoundedTime" dateType="date"></l-date>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_Manager')">
                  <el-form-item :label="$t('管理人')" prop="f_Manager">
                    <l-user-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_Manager',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_Manager"></l-user-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_OuterPhone')">
                  <el-form-item :label="$t('电话')" prop="f_OuterPhone">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_OuterPhone',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_OuterPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_Email')">
                  <el-form-item :label="$t('邮箱')" prop="f_Email">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_Email',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_Email"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_Fax')">
                  <el-form-item :label="$t('传真')" prop="f_Fax">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_Fax',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_Fax"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_formLookAuth('f_Area')">
                  <el-form-item :label="$t('地点')" prop="f_Area">
                    <el-col :span="12" style="padding-right: 8px">
                      <l-area-select 
                      :disabled="
                      !lr_formEditAuth(
                        'f_Area',
                        false || isReadOnly
                      )
                    "
                      v-model="formData.f_Area"></l-area-select>
                    </el-col>
                    <el-col :span="12">
                      <el-input 
                      :disabled="
                      !lr_formEditAuth(
                        'f_Address',
                        false || isReadOnly
                      )
                    "
                      v-model="formData.f_Address" :placeholder="$t('please enter详细地址')">
                      </el-input>
                    </el-col>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_Postalcode')">
                  <el-form-item :label="$t('邮编')" prop="f_Postalcode">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_Postalcode',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_Postalcode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_WebAddress')">
                  <el-form-item :label="$t('官网')" prop="f_WebAddress">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_WebAddress',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_WebAddress"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_formLookAuth('f_SortCode')">
                  <el-form-item :label="$t('排序')" prop="f_SortCode">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_SortCode',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_SortCode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_formLookAuth('f_Description')">
                  <el-form-item :label="$t('说明')" prop="f_Description">
                    <el-input 
                    :disabled="
                      !lr_formEditAuth(
                        'f_Description',
                        false || isReadOnly
                      )
                    "
                    type="textarea" v-model="formData.f_Description"></el-input>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('人事信息')" name="tab1" v-if="lr_hasPageAuth('tab1')">
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col :span="24" v-if="lr_formLookAuth('f_ManagerId')">
                  <el-form-item :label="$t('行政正职领导')" prop="f_ManagerId">
                    <l-user-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_ManagerId',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_ManagerId" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_formLookAuth('f_PartyManagerId')">
                  <el-form-item :label="$t('党委正职领导')" prop="f_PartyManagerId">
                    <l-user-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_PartyManagerId',
                        false || isReadOnly
                      )
                    "
                    v-model="formData.f_PartyManagerId" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_formLookAuth('f_ManagerIds')">
                  <el-form-item :label="$t('部门领导')" prop="f_ManagerIds">
                    <l-user-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_ManagerIds',
                        false || isReadOnly
                      )
                    "
                    multiple v-model="formData.f_ManagerIds" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_formLookAuth('f_LeaderIds')">
                  <el-form-item :label="$t('上级分管领导')" prop="f_LeaderIds">
                    <l-user-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_LeaderIds',
                        false || isReadOnly
                      )
                    "
                    multiple v-model="formData.f_LeaderIds" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_formLookAuth('f_DeptTag')">
                  <el-form-item :label="$t('部门标签')" prop="f_DeptTag">
                    <l-select 
                    :disabled="
                      !lr_formEditAuth(
                        'f_DeptTag',
                        false || isReadOnly
                      )
                    "
                    :multiple="true" :options="f_DeptTagOptions" v-model="formData.f_DeptTag" />
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>

    </el-form>
  </div>
</template>
<script>
export default {
  props: {
        isReadOnly: {
        type: Boolean,
        default: false,
        },
    },
  data() {
    return {
      formData: {
        f_FullName: "",
        f_ShortName: "",
        f_EnCode: "",
        f_Nature: "",
        f_ParentId: "",
        f_FoundedTime: null,
        f_Manager: "",
        f_OuterPhone: "",
        f_Email: "",
        f_Fax: "",
        f_ProvinceId: "",
        f_CityId: "",
        f_CountyId: "",
        f_Address: "",
        f_Postalcode: "",
        f_WebAddress: "",
        f_Description: "",

        f_Area: "",
        f_SortCode: 99,//排序
        f_ManagerId:"",//行政正职领导
        f_PartyManagerId:"",//党委正职领导
        f_ManagerIds:"",//部门领导
        f_LeaderIds:"",//上级分管领导
        f_DeptTa:"",//部门标签
      },
      rules: {
        f_FullName: [{ required: true, message: this.$t("please enter公司名称") }],
        f_ShortName: [{ required: true, message:  this.$t("please enter公司简称") }],
        f_Nature: [{ required: true, message:  this.$t("please select公司性质") }],
        f_EnCode: [
          { required: true, message:  this.$t("please enter公司编号") },
          { pattern: /^[-+]?\d+$/, message:  this.$t("公司编号需要为数字") },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_CompanyId;
            },
            tableName: "lr_base_company",
            keyName: "f_CompanyId",
            trigger: "null",
          },
        ],
      },
    };
  },
  created() {
    this.lr_loadDataItem("CompanyNature");
    this.lr_loadDataItem('DeptTagsManage')
  },
  computed: {
    activeName:{
      get() {
        return "tab0";
      },
      set() {
        const tabs = [
          "tab0","tab1"
        ].filter(t=>this.lr_hasPageAuth(t));
        if(tabs.length > 0){
          return tabs[0].value;
        }
        else{
          return ''
        }
      },
    },
    companyTree() {
      return this.$toTree(
        this.lr_companyList,
        "f_CompanyId",
        "f_ParentId",
        "f_CompanyId",
        "f_FullName",
        [this.formData.f_CompanyId]
      );
    },
    f_DeptTagOptions(){
        return this.lr_dataItemOptions(this.lr_dataItem['DeptTagsManage'])
    },
  },
  methods: {
    resetForm() {
      this.formData.f_ProvinceId = "";
      this.formData.F_CityId = "";
      this.formData.F_CountyId = "";
      this.formData.f_CompanyId = "";
      this.activeName = "tab0";
      this.$refs.form && this.$refs.form.resetFields();
    },
    // 校验表单
    validateForm(callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          callback();
        }
      });
    },
    setForm(data) {
      const formData = this.$deepClone(data);
      formData.children && delete formData.children;
      if (
        !this.$validatenull(formData.f_ProvinceId) &&
        !this.$validatenull(formData.f_CityId) &&
        !this.$validatenull(formData.f_CountyId)
      ) {
        formData.f_Area = `${formData.f_ProvinceId},${formData.f_CityId},${formData.f_CountyId}`;
      }
      if (formData.f_ParentId == "0") {
        formData.f_ParentId = "";
      }
      this.formData = formData;
    },
    getForm() {
      if (!this.$validatenull(this.formData.f_Area)) {
        const areaList = this.formData.f_Area.split(",");
        this.formData.f_ProvinceId = areaList[0];
        this.formData.f_CityId = areaList[1];
        this.formData.f_CountyId = areaList[2];
      }
      if (this.formData.f_ParentId == "") {
        this.formData.f_ParentId = "0";
      }
      return this.$deepClone(this.formData);
    },
  },
};
</script>